<template>
  <cu-custom bg-color="bg-gradual-header">
    <template #content>简历模板</template>
  </cu-custom>
  <view class="container">
    <div class="search-box">
      <input class="search" />
      <div class="search-text">
        <uni-icons type="paperplane-filled" color="white" size="20"></uni-icons>
        <span>搜索</span>
      </div>
    </div>
    <div v-if="cataList.length" class="cate-box">
      <scroll-view :key="current" scroll-x="true" class="solid-bottom">
        <view
          v-for="(item, index) in cataList"
          :key="index + current"
          :class="[current == index ? 'text-active' : '', 'cate-item']"
          @click="setActive(index)"
        >
          {{ item && item.cateTitle }}
        </view>
      </scroll-view>
      <view class="list-box">
        <view
          v-for="(item, index) in temList"
          :key="index"
          class="item margin-bottom"
          @click="openTemplate(item)"
        >
          <view>
            <img :src="item.temImage" alt="" class="temImage" />
            <view class="text-center temTitle">
              {{ item.temTitle }}
            </view>
          </view>
        </view>
      </view>
    </div>
  </view>
  <uni-popup ref="popup" type="bottom" background-color="#fff">
    <view id="popup-box" class="popup-box">
      <view class="text-df">{{ currentTem.temTitle }}</view>
      <view class="tempalate-img">
        <img :src="currentTem.temImage" alt="" />
      </view>
      <view
        v-if="currentDetails.data.length"
        class="currentDetails-box margin-top"
      >
        <view class="text-center text-lg">请选择上方简历内容</view>
        <view class="text-center text-sm text-grey"
          >选择的内容,将填入你的简历中</view
        >
        <checkbox-group
          class="flex flex-wrap align-center margin-top"
          @change="changeChebox"
        >
          <checkbox
            v-for="(item, index) in currentDetails.data"
            :key="index"
            class="margin-left"
            :checked="item.check"
            :value="index + ''"
          >
            {{ item.title }}
          </checkbox>
        </checkbox-group>
      </view>
      <button
        v-if="!show"
        class="bg-blue margin-top lg use-template"
        @click="getDetail"
      >
        使用模板
      </button>
      <button
        v-if="show"
        class="bg-blue margin-top lg use-template"
        @click="toPreview"
      >
        选择模块 使用模板
      </button>
    </view>
  </uni-popup>
  <tab-bar></tab-bar>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick } from "vue";
import { getTemCate, getTemList, getTemDetails, getpdf } from "@/api/index";
const value = ref("模板");
let cataList: any = ref([]);
const current: any = ref(0);
const currentItem: any = ref(null);
const temList: any = ref([]);
const popup: any = ref(null);
const currentTem: any = ref(null);
const currentDetails: any = reactive({ data: [] });
let noteBase = {};
const getOptions = async () => {
  let data: any = await getTemCate();
  cataList.value = data.data;
  currentItem.value = cataList.value[0];
  console.log(currentItem.value, "666");
};
const show = ref(false);
const setActive = async (index: number) => {
  current.value = index;
  currentItem.value = cataList.value[index];
  await getList();
};

const getList = async () => {
  let data: any = await getTemList({ id: currentItem.value._id });
  temList.value = data.data;
  console.log(data, "data");
};

const init = async () => {
  await getOptions();
  await getList();
};
init();

const openTemplate = (item: any) => {
  currentTem.value = item;
  popup.value.open();
};
const getDetail = async () => {
  console.log(currentItem.value);
  let data: any = await getTemDetails({ id: currentTem.value._id });
  console.log(data.data.details);
  const {
    selfEvaluation,
    educationalBg,
    workExperience,
    certificate,
    skills,
    hobby,
    isVertical,
    type,
  } = data.data.details[0];
  noteBase = {
    isVertical,
    type: 1,
  };
  let obj = [];
  if (selfEvaluation.data) {
    obj.push({
      title: "自我评价",
      data: { selfEvaluation },
      check: false,
    });
  }
  if (selfEvaluation.data.length) {
    obj.push({
      title: "教育背景",
      data: { educationalBg },
      check: false,
    });
  }
  if (workExperience.data.length) {
    obj.push({
      title: "工作经历",
      data: { workExperience },
      check: false,
    });
  }
  if (certificate.data) {
    obj.push({
      title: "证书",
      data: { certificate },
      check: false,
    });
  }
  if (skills.data.length) {
    obj.push({
      title: "个人技能",
      data: { skills },
      check: false,
    });
  }
  if (hobby.data.text) {
    obj.push({
      title: "兴趣爱好",
      data: { hobby },
      check: false,
    });
  }
  currentDetails.data = obj;
  show.value = true;
  nextTick(() => {
    let dom: any = document.getElementById("popup-box");
    if (dom) {
      dom.scrollTop = dom.clientHeight;
    }
  });
};
let userInfo: any = uni.getStorageSync("userInfo");
const toPreview = () => {
  let params = {
    personal: {
      name: userInfo.account,
      img: userInfo.avatarUrl,
    },
    ...noteBase,
  };
  currentDetails.data.forEach((item: any) => {
    console.log(item);
    params = { ...params, ...item.data };
  });
  uni.showLoading({
    title: "加载中",
  });
  getpdf(params).then((res: any) => {
    uni.hideLoading();
    uni.navigateTo({ url: "/pages/preView/index?url=" + res });
  });
  console.log("show", params);
};

const changeChebox = (item: any) => {
  let indexs = item.detail.value;
  currentDetails.data.forEach((current: any, index: number) => {
    current.check = false;
    indexs.forEach((item: any) => {
      if (index == item) current.check = true;
    });
  });
};
</script>

<style>
.container {
  height: 100vh;
  background: white;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.cate-box {
  white-space: nowrap;
  width: 100%;
}
.cate-item {
  box-sizing: border-box;
  display: inline-block;
  text-align: center;
  line-height: 50rpx;
  margin-left: 10rpx;
  padding: 5rpx;
  color: rgba(80, 66, 73, 1);
}
.text-active {
  font-weight: 500;
  letter-spacing: 0px;
  line-height: 18.75px;
  color: rgba(142, 94, 63, 1);
  position: relative;
}
.text-active::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 4rpx;
  bottom: 0rpx;
  left: 0rpx;
  background-color: rgba(142, 94, 63, 1);
}
.list-box {
  margin-top: 8rpx;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.item {
  width: 350rpx;
  margin-left: 15rpx;
  border-radius: 15rpx;
  box-shadow: inset 0px -4px 4px 0px rgba(0, 0, 0, 0.25);
}
.temImage {
  width: 100%;
  height: 100%;
}
.uni-popup {
  position: relative;
  z-index: 999999;
}

.popup-box {
  width: 750rpx;
  height: 90vh;
  padding: 15rpx;
  margin: 0 auto;
  overflow-y: scroll;
  position: relative;
}
.use-template {
  margin: 0 auto;
  width: 700rpx;
}
.tempalate-img {
  width: 100%;
}
.tempalate-img img {
  width: 100%;
  padding: 10rpx;
  background-color: #8f8f94;
}
.currentDetails-box {
  margin-bottom: 20rpx;
}
.search-box {
  display: flex;
  padding: 10rpx;
  padding-top: 0rpx;
  background: linear-gradient(
    119.4deg,
    rgba(141, 93, 61, 1) 0%,
    rgba(80, 66, 73, 1) 100%
  );
}
.search {
  width: 580rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-radius: 360rpx;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0px -4px 4px 0px rgba(0, 0, 0, 0.25);
}
.search-text {
  line-height: 80rpx;
  color: white;
  font-size: 40rpx;
  margin-left: 10rpx;
}
.temTitle {
  line-height: 80rpx;
}
</style>
